import React from 'react';
import './Sidebar.css';
import { Link, useLocation } from 'react-router-dom';
import { useAuth } from '../hooks/useAuth';
import { Permission } from '@/types/auth';

const menu = [
  { to: '/home', icon: 'home', label: '创作', permission: Permission.VIEW_HOME },
  { to: '/user', icon: 'user', label: '我的', permission: Permission.VIEW_USER },
];
const menu2 = [
  { to: '/design', icon: 'plus', label: '创建设计', permission: Permission.VIEW_CREATE },
  { to: '/template', icon: 'template', label: '模板', permission: Permission.VIEW_TEMPLATE },
  { to: '/sourcematerial', icon: 'material', label: '素材', permission: Permission.VIEW_SOURCE },
  { to: '/tool', icon: 'tool', label: '设计工具', permission: Permission.VIEW_TOOL },
  { to: '/ai', icon: 'ai', label: '稿定 AI', permission: Permission.VIEW_AI, beta: true },
  { to: '/talk', icon: 'chat', label: 'AI 对话', permission: Permission.VIEW_TALK },
];


const Sidebar: React.FC = () => {
  const location = useLocation();
  const { hasPermission } = useAuth();
  
  // 检查当前路径是否为home页面
  const isHomePage = location.pathname === '/home' || location.pathname === '/';
  
  return (
    <aside className="sidebar">
      <div className="sidebar-header">
        <div className="sidebar-title">稿定</div>
      </div>
      <nav className="sidebar-nav">
        <ul>
          {menu.map(item => {
            // 检查权限
            if (!hasPermission(item.permission)) return null;
            
            return (
              <li key={item.to} className={
                (item.to === '/home' && isHomePage) || 
                (item.to !== '/home' && location.pathname === item.to) 
                  ? 'active' 
                  : ''
              }>
                <Link to={item.to} className="sidebar-link">
                  <span className={`icon ${item.icon}`} /> {item.label}
                </Link>
              </li>
            );
          })}
        </ul>
        <hr />
        <ul>
          {menu2.map(item => {
            // 检查权限
            if (!hasPermission(item.permission)) return null;
            
            return (
              <li key={item.to} className={location.pathname === item.to ? 'active' : ''}>
                <Link to={item.to} className="sidebar-link">
                  <span className={`icon ${item.icon}`} /> {item.label}
                  {item.beta && <span className="beta">Beta</span>}
                </Link>
              </li>
            );
          })}
        </ul>
      </nav>
    </aside>
  );
};

export default Sidebar; 